<template>
  <div class="app-container">
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="统计" name="first">
        <div
          style="
            display: flex;
            align-items: center;
            justify-content: space-around;
          "
        >
          <div style="display: flex; align-items: center">
            <div style="margin-right: 4px">设备名称:</div>
            <el-select v-model="equipmentId" placeholder="请选择">
              <el-option
                v-for="item in deviceList"
                :key="item.id"
                :label="item.equipmentInfo.name"
                :value="item.equipmentId"
              />
            </el-select>
          </div>
          <div style="display: flex; align-items: center">
            <div style="margin-right: 4px">设备名称:</div>
            <input
              class="el-input__inner"
              style="width: 200px"
              type="text"
              v-model="equipmentName1"
            />
          </div>
          <div style="display: flex; align-items: center">
            <div style="margin-right: 4px">数据类型:</div>
            <el-select
              v-model="dataType"
              multiple
              collapse-tags
              placeholder="请选择"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div class="block" style="display: flex; align-items: center">
            <div style="display: flex; align-items: center">
              开始时间：
              <el-date-picker
                v-model="startTime"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="datetime"
                placeholder="选择开始时间"
              />
            </div>
            <div
              class="littleMargin"
              style="display: flex; align-items: center; margin-left: 20px"
            >
              结束时间：
              <el-date-picker
                v-model="endTime"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="datetime"
                placeholder="选择结束时间"
              />
            </div>
          </div>
          <el-button @click="gethistoryData">查询</el-button>
        </div>
        <div
          ref="charts"
          v-loading="loading"
          style="
            width: 100%;
            height: 700px;
            margin-top: 20px;
            padding: 20px;
            background: #ffffff;
          "
        >
          <p-echarts :option="option" />
        </div>
      </el-tab-pane>
      <el-tab-pane label="历史数据" name="second">
        <wise-crud
          ref="wise-crud"
          :urls="urls"
          :fields="fields"
          :handle="handle"
          :filters="filters"
          @selection-change="handleSelectionChange"
        >
          <template slot="outHandle">
            <el-col :span="3">
              <el-button
                v-permission="['superSysOpsAdmin']"
                type="danger"
                @click="batchRemove"
                >删除</el-button
              >
            </el-col>
          </template>
        </wise-crud>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import WiseCrud from "@/components/Crud/wiseCrud";
import pEcharts from "@/components/charts/pEcharts";
import { postHandle } from "@/api";
import dayjs from "dayjs";
export default {
  name: "WelderHistory",
  components: {
    WiseCrud,
    pEcharts,
  },
  data() {
    return {
      equipmentName1: "",
      loading: false,
      activeName: "first",
      filtersItem: [],
      deviceList: [],
      equipmentId: "",
      startTime: dayjs().startOf("day").toDate(),
      endTime: dayjs().endOf("day").toDate(),

      dataType: ["current"],
      urls: {
        list: "/api/v1/welder-sbtx-second/hj-datas-comb/get-list-by-code",
        export: "/api/v1/welder-sbtx-second/hj-datas-comb/export-excel",
      },
      handle: ["export", "filters"],
      options: [
        {
          value: "current",
          label: "焊接电流",
        },
        {
          value: "voltage",
          label: "电压",
        },

        {
          value: "waterTemp",
          label: "层间温度",
        },
        {
          value: "waterVelocity",
          label: "焊接速度",
        },
        {
          value: "airFlux",
          label: "气体流量",
        },
    
        {
          value: "heaterA",
          label: "焊接电流2",
        },
        {
          value: "heaterV",
          label: "电压2",
        },
        {
          value: "airPressure",
          label: "气体流量2",
        },
      ],
      fields: [
        {
          label: "序号",
          type: "selection",
          use: ["table"],
        },

        {
          label: "网关编号",
          prop: "geteWayCode",
          type: "text",
          use: ["table"],
        },
        {
          label: "设备名称",
          prop: "equipmentName",
          type: "text",
          use: ["table"],
        },
        {
          label: "设备名称",
          prop: "equipmentObj",
          type: "select",
          url: "/api/v1/welder-sbtx-second/project-equipment-comb/list",
          filters: [
            {
              field: "spaceId",
              operator: "EQUALS",
              value: this.$store.state.project.spaceId,
            },
            {
              field: "code",
              operator: "EQUALS",
              value: "welder",
            },
          ],
          labelKey: "equipmentInfo.name",
          valueKey: "equipmentId",
          objKeys: [
            {
              field: "equipmentId",
              operator: "EQUALS",
              key: "equipmentId",
            },
          ],
          use: ["filters"],
        },
        {
          label: "设备名称",
          prop: "equipmentName",
          type: "text",
          use: ["filters"],
        },
        {
          label: "焊工名称",
          prop: "userName",
          type: "select",
          url: "/api/v1/welder-sbtx-second/user-information-comb/getUserBySpid",
          use: ["table"],
          filters: [
            {
              field: "spaceId",
              operator: "EQUALS",
              value: this.$store.state.project.spaceId,
            },
          ],
          labelKey: "username",
          valueKey: "userId",
          objKeys: [
            {
              field: "username",
              operator: "EQUALS",
              key: "username",
            },
          ],
          use: ["filters"],
        },
        {
          label: "焊工名称",
          prop: "username",
          type: "text",

          use: ["table"],
        },
        {
          label: "焊口编号",
          prop: "weldSerialNum",
          type: "text",

          use: ["table"],
        },
        {
          label: "焊接工艺编号",
          prop: "process",
          type: "text",
          use: ["table"],
        },
        // {
        //   label: '焊接方法',
        //   prop: 'weldingMethodId',
        //   type: 'text',
        //   tableWidth: '100px',
        //   use: ['table']
        // },
        // {
        //   label: '人员编号',
        //   prop: 'personCode',
        //   type: 'text',
        //   tableWidth: '100px',
        //   use: ['table']
        // },
        // {
        //   label: '人员名称',
        //   prop: 'username',
        //   type: 'text',
        //   tableWidth: '100px',
        //   use: ['table']
        // },
        {
          label: "焊层",
          prop: "position",
          type: "text",
          use: ["table"],
        },
        {
          label: "焊接电流",
          prop: "current",
          type: "text",
          use: ["table"],
        },
        {
          label: "电压",
          prop: "voltage",
          type: "text",
          use: ["table"],
        },
        // {
        //   label: '焊前焊后温度',
        //   prop: 'hazTemp',
        //   type: 'text',
        //   use: ['table']
        // },
        {
          label: "层间温度",
          prop: "waterTemp",
          type: "text",
          use: ["table"],
        },
        {
          label: "焊接速度",
          prop: "waterVelocity",
          type: "text",
          use: ["table"],
        },
        {
          label: "气体流量",
          prop: "airFlux",
          type: "text",
          use: ["table"],
        },
        {
          label: "氩/CO2",
          prop: "arPurity",
          type: "text",
          use: ["table"],
        },

        {
          label: "焊接电流2",
          prop: "heaterA",
          type: "text",
          use: ["table"],
        },
        {
          label: "电压2",
          prop: "heaterV",
          type: "text",
          use: ["table"],
        },
        {
          label: "气体流量2",
          prop: "airPressure",
          type: "text",
          use: ["table"],
        },
        {
          label: "参数采集时间",
          prop: "cjTime",
          type: "datetime",
          operator: "between",
          use: ["table", "filters"],
          format: "YYYY-MM-DD HH:mm:ss",
        },
      ],
      multipleSelection: [],
      page: {
        p: 1,
        ps: 10,
      },
      dataList: [],
    };
  },
  computed: {
    spaceId() {
      return this.$store.state.project.spaceId;
    },
    filters() {
      return [
        {
          field: "spaceId",
          operator: "EQUALS",
          value: this.$store.state.project.spaceId,
        },
        {
          field: "code",
          operator: "EQUALS",
          value: "welder",
        },
      ];
    },
    option() {
      let timeData = [];
      let series = [];
      this.dataType.forEach((item) => {
        let data = [];
        this.dataList.forEach((element) => {
          data.push(element[item] ? element[item] : 0);
        });
        series.push({
          name: this.options.find((o) => o.value === item).label,
          type: "line",
          smooth: true,
          data: data,
        });
      });
      this.dataList.forEach((element) => {
        timeData.push(dayjs(element.cjTime).format("YYYY-MM-DD HH:mm:ss"));
      });
      return {
        grid: {
          left: 30,
          right: 15,
          bottom: 100,
          top: 80,
        },
        color: [
          "#5CD5C8",
          "#A48AEA",
          "#EAD18A",
          "#E07C71",
          "#8ED55C",
          "#D12A89",
        ],
        legend: {
          x: "center",
          y: "top",
          show: true,
          top: "5%",
          right: "5%",
          itemWidth: 6,
          itemGap: 20,
          textStyle: {
            color: "#556677",
          },
          data: series.map((item) => item.name),
        },
        toolbox: {
          right: 80,
          feature: {
            // dataZoom: {
            //   yAxisIndex: 'none'
            // },
            // restore: {},
            saveAsImage: {},
          },
        },
        dataZoom: [
          {
            startValue: dayjs(this.startTime).format("YYYY-MM-DD HH:mm:ss"),
          },
          {
            type: "inside",
          },
        ],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            label: {
              show: true,
              backgroundColor: "#fff",
              color: "#556677",
              borderColor: "rgba(0,0,0,0)",
              shadowColor: "rgba(0,0,0,0)",
              shadowOffsetY: 0,
            },
            lineStyle: {
              width: 0,
            },
          },
          backgroundColor: "#fff",
          textStyle: {
            color: "#5c6c7c",
          },
          extraCssText: "box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)",
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: timeData,
        },
        yAxis: {
          type: "value",
          axisPointer: {
            snap: true,
          },
        },
        series: series,
      };
    },
  },
  created() {
    this.getDeviceList();
  },
  methods: {
    getDeviceList() {
      postHandle("/api/v1/welder-sbtx-second/project-equipment-comb/list", {
        d: {
          filters: [
            {
              field: "spaceId",
              operator: "EQUALS",
              value: this.spaceId,
            },
            {
              field: "code",
              operator: "EQUALS",
              value: "welder",
            },
          ],
          page: {
            ps: 1000,
            p: 1,
          },
          retPage: false,
        },
      }).then((res) => {
        this.deviceList = res.result;
        this.equipmentId = this.deviceList[0].equipmentId;
        this.gethistoryData();
      });
    },
    gethistoryData() {
      this.loading = true;
      postHandle("/api/v1/welder-sbtx-second/hj-datas-comb/list", {
        d: {
          filters: [
            {
              field: "spaceId",
              operator: "EQUALS",
              value: this.spaceId,
            },
            {
              field: "code",
              operator: "EQUALS",
              value: "welder",
            },
            {
              field: "equipmentId",
              operator: "EQUALS",
              value: this.equipmentId,
            },
            {
              field: "equipmentName",
              operator: "EQUALS",
              value: this.equipmentName1,
            },
            {
              field: "cjTime",
              operator: "BETWEEN",
              value: dayjs(this.startTime).valueOf(),
              value_to: dayjs(this.endTime).valueOf(),
            },
          ],
          page: {
            ps: 9999,
            p: 1,
          },
          sorts: [
            {
              field: "ct",
              isDesc: false,
            },
          ],
          retPage: false,
        },
      }).then((res) => {
        this.loading = false;
        this.dataList = res.result;
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    batchRemove() {
      let params = this.$refs["wise-crud"].dataFilters;
      let date = params.find((item) => item.field === "cjTime");
      if (date) {
        this.$confirm(
          "此操作将永久删除该时间段下的所有数据, 是否继续?",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        )
          .then(() => {
            postHandle("/api/v1/welder-sbtx-second/hj-datas-comb/remove-time", {
              d: {},
              obj: {
                code: "welder",
                spaceId: this.spaceId, // 项目spaceid
                startTime: dayjs(date.value).format("YYYY-MM-DD HH:mm:ss"), // 开始时间
                endTime: dayjs(date.value_to).format("YYYY-MM-DD HH:mm:ss"), // 结束时间
              },
            })
              .then((res) => {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                this.$refs["wise-crud"].handleSearch();
              })
              .catch(() => {
                this.$message({
                  type: "info",
                  message: "删除失败",
                });
              });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      } else {
        if (!(this.multipleSelection && this.multipleSelection.length > 0)) {
          this.$message.error("请选择要删除的数据");
          return false;
        }
        this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            postHandle(
              "/api/v1/welder-sbtx-second/hj-datas-comb/remove-batch",
              {
                d: {},
                obj: {
                  dataIds: this.multipleSelection.map((item) => item.id),
                },
              }
            )
              .then((res) => {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                this.$refs["wise-crud"].handleSearch();
              })
              .catch(() => {
                this.$message({
                  type: "info",
                  message: "删除失败",
                });
              });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      }
    },
  },
};
</script>

<style></style>
